<template>
	<view class="data-push">
		<view class="data-push-1">
			<view class="data-push-1-top">
				<view class="store-info">
					<image :src="info.store_logo || 'https://master.shengejiaju.cn/web/static/icons/shop-default.png'" mode="aspectFit"></image>
					<text class="store-name">{{info.store_name || '未设置店铺名称'}}</text>
				</view>
				<!-- <view class="top-info">
					<view class="top-info-tit">今日收款（元）</view>
					<view class="top-info-num">￥{{info.today_price}}</view>
				</view> -->
			</view>
			<view class="data-push-1-bottom">
				<!-- <view class="bottom-item">
					<view class="bottom-item-tit">今日成交订单</view>
					<view class="bottom-item-des">{{info.today_order}}<text>笔</text></view>
				</view> -->
				<view class="bottom-item">
					<view class="bottom-item-tit">今日门店访客</view>
					<view class="bottom-item-des">{{info.today_flow}}<text>人</text></view>
				</view>
				<view class="bottom-item">
					<view class="bottom-item-tit">今日拉新获客数</view>
					<view class="bottom-item-des">{{info.today_extension}}<text>人</text></view>
				</view>
			</view>
		</view>
		<view class="data-push-2">
			<view class="data-push-tit">
				<view class="data-push-tit-left">店铺经营数据</view>
				<!-- <view class="data-push-tit-right">
					交易金额：<text>8699.9元</text>
				</view> -->
			</view>
			<view class="data-push-2-chart">
				<qiun-data-charts
					type="line"
					:chartData="moneyChartData"
					background="none"
					:opts="orderMoney"
					seriesFormat="seriesDemo1"
					:animation="false"
				/>
			</view>
			<view class="data-push-2-bottom">
				<view class="bottom-top">
					<view class="bottom-top-item">首页浏览量：<text>{{info.visitors}}人</text></view>
					<!-- <view class="bottom-top-item">店铺装修程度：<text>{{info.process}}</text></view> -->
				</view>
				<!-- <view class="bottom-bottom">
					<view class="text">三分钟装修首页，更能吸引客户关注，促进销售业绩！数据表明，业绩好的，普遍装修程度达90%上。</view>
					<text class="btn" @click="goGrowing">去装修</text>
				</view> -->
			</view>
		</view>
		<view class="data-push-3">
			<view class="data-push-tit">
				<view class="data-push-tit-left">店铺访客数据</view>
				<view class="data-push-tit-right">流量：<text>{{info.visitors}}人</text></view>
			</view>
			<view class="data-push-3-chart">
				<qiun-data-charts
					type="line"
					:chartData="flowChartData"
					background="none"
					:opts="flowUser"
					seriesFormat="seriesDemo1"
					:animation="false"
				/>
			</view>
		</view>
		<view class="data-push-4">
			<view class="data-push-tit">
				<view class="data-push-tit-left">今日门店访客</view>
				<view class="data-push-tit-right" @click="moreFlow">更多</view>
			</view>
			<view class="data-push-4-list">
				<view class="data-push-4-item" v-for="(data,index) in BrowseUserList" :key="index" @click="goInfo(data.user_id,0)" v-if="BrowseUserList.length">
					<view class="data-push-4-item-top">
						<image :src="data.heard_img"></image>
						<view class="data-push-4-item-top-left">
							<view class="top">{{data.nickname}} <text class="time">{{data.add_time}}</text></view>
							<view class="bottom">
								ID:{{data.user_id}} 
								<text>
									<text v-if="data.type==1">小程序：</text>
									<text v-if="data.type==2">APP：</text>
									<text v-if="data.type==3">H5：</text>
									<text v-if="data.type==4">PC：</text>
									<text v-if="data.type==5">Ipad：</text>
									<text v-if="data.type==6">后台系统：</text>
									{{data.num}}次
								</text>
							</view>
						</view>
					</view>
					<view class="data-push-4-item-bottom">
						<text>TA：{{data.where}}</text>
						<button plain type="primary" size="mini">查看详情</button>
					</view>
				</view>
				<nothing text="暂无数据" :btn="false" v-else></nothing>
			</view>
		</view>
		<view class="data-push-5">
			<view class="data-push-tit">
				<view class="data-push-tit-left">人员数据</view>
			</view>
			<view class="data-push-5-top">
				<view class="top-item">
					<view class="top-item-tit">普通用户</view>
					<view class="top-item-des">{{info.user_c}}<text>人</text></view>
				</view>
				<view class="top-item">
					<view class="top-item-tit">业务员</view>
					<view class="top-item-des">{{info.salesman}}<text>人</text></view>
				</view>
				<view class="top-item">
					<view class="top-item-tit">财务</view>
					<view class="top-item-des">{{info.finance}}<text>人</text></view>
				</view>
				<view class="top-item">
					<view class="top-item-tit">分销商</view>
					<view class="top-item-des">{{info.distributor}}<text>人</text></view>
				</view>
			</view>
			<view class="data-push-5-bottom">
				<view class="text">据说把员工设置好，每天安排发朋友圈推广商城，可以提高店铺访客数和拉新数哦，不信你试试！</view>
				<text class="btn" @click="goStaff">去设置</text>
			</view>
		</view>
		<view class="data-push-6">
			<view class="data-push-tit">
				<view class="data-push-tit-left">人员管理</view>
			</view>
			<u-sticky h5-nav-height="0">
				<u-tabs :list="tabs" :current="current" @change="change" :isScroll="false" inactive-color="#868992" :show-bar="false" font-size="24" :bold="false" active-color="#141414"></u-tabs>
			</u-sticky>
			<view class="data-push-6-list">
				<view class="data-push-6-item" v-for="(data,index) in staffList" :key="index" v-if="staffList.length">
					<view class="item-top">
						<image :src="data.heard_img"></image>
						<view class="item-top-info">
							<view class="info-name">{{data.nickname}}</view>
							<view class="info-wx">微信：{{data.phone}}</view>
							<view class="info-wx">身份：{{data.typeName}}</view>
						</view>
						<view class="item-top-btn">
							<view class="btn-1" @click="makePhone(data.phone)">拨打电话</view>
							<view class="copy" @click="copyWx(data.phone)">复制微信</view>
						</view>
					</view>
					<view class="item-bottom">
						<view class="item-bottom-top">
							<!-- <text>总业绩：{{data.order_price}}元</text> -->
							<text>推广总数：{{data.extension_num}}次</text>
							<text>使用次数：{{data.active_num?data.active_num:0}}次</text>
						</view>
						<view class="item-bottom-bottom">
							<text>上次登录时间：{{data.online_time?data.online_time:'很久以前'}}</text>
							<view class="btn" @click="goInfo(data.user_id,0)">查看</view>
						</view>
					</view>
				</view>
			</view>
			<nothing text="暂无数据" :btn="false" v-if="!staffList.length"></nothing>
		</view>
		<loading v-if="loading"></loading>
		<no-more text="没有更多了" v-if="noMore && staffList.length"></no-more>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					distributor: 12,
					finance: 0,
					process: 0,
					salesman: 0,
					second_distributor: 0,
					today_extension: 0,
					today_flow: 0,
					today_order: 0,
					today_price: 0,
					user_c: 0,
					visitors: 0,
					store_logo: '',
					store_name: ''
				},
				current: 0,
				tabs: [{
					name: '全部'
				},{
					name: '业务员/设计'
				},{
					name: '财务'
				},{
					name: '分销商'
				},{
					name: '代理商'
				}],
				moneyChartData:{
				  categories:[],
				  series:[],
				},
				flowChartData:{
				  categories:[],
				  series:[],
				},
				"orderMoney":{
					"type": "line",
					"canvasId": "",
					"canvas2d": false,
					"background": "none",
					"animation": true,
					"timing": "easeOut",
					"duration": 1000,
					"color": [
							"#2073F5",
							"#91CB74",
							"#FAC858",
							"#EE6666",
							"#73C0DE",
							"#3CA272",
							"#FC8452",
							"#9A60B4",
							"#ea7ccc"
					],
					"padding": [
							15,
							15,
							0,
							15
					],
					"rotate": false,
					"rotateLock": false,
					"fontSize": 10,
					"fontColor": "#A6A9B3",
					"enableScroll": false,
					"touchMoveLimit": 60,
					"enableMarkLine": false,
					"dataLabel": true,
					"dataPointShape": true,
					"dataPointShapeType": "solid",
					"xAxis": {
						"disabled": false,
						"axisLine": true,
						"axisLineColor": "#CCCCCC",
						"calibration": false,
						"fontColor": "#A6A9B3",
						"fontSize": 10,
						"rotateLabel": false,
						"itemCount": 5,
						"boundaryGap": "center",
						"disableGrid": true,
						"gridColor": "#CCCCCC",
						"gridType": "solid",
						"dashLength": 4,
						"gridEval": 1,
						"scrollShow": false,
						"scrollAlign": "left",
						"scrollColor": "#A6A6A6",
						"scrollBackgroundColor": "#EFEBEF"
					},
					"yAxis": {
						"disabled": false,
						"disableGrid": false,
						"splitNumber": 5,
						"gridType": "dash",
						"dashLength": 2,
						"gridColor": "#CCCCCC",
						"padding": 10,
						"showTitle": false,
						"data": []
					},
					"legend": {
						"show": false,
						"position": "bottom",
						"float": "center",
						"padding": 5,
						"margin": 5,
						"backgroundColor": "rgba(0,0,0,0)",
						"borderColor": "rgba(0,0,0,0)",
						"borderWidth": 0,
						"fontSize": 13,
						"fontColor": "#666666",
						"lineHeight": 11,
						"hiddenColor": "#CECECE",
						"itemGap": 10
					},
					"extra": {
						"line": {
								"type": "curve",
								"width": 3
						},
						"tooltip": {
							"showBox": true,
							"showArrow": true,
							"borderWidth": 0,
							"borderRadius": 0,
							"borderColor": "#000000",
							"borderOpacity": 0.7,
							"bgColor": "#000000",
							"bgOpacity": 0.7,
							"gridType": "solid",
							"dashLength": 4,
							"gridColor": "#CCCCCC",
							"fontColor": "#FFFFFF",
							"splitLine": true,
							"horizentalLine": false,
							"xAxisLabel": false,
							"yAxisLabel": false,
							"labelBgColor": "#FFFFFF",
							"labelBgOpacity": 0.7,
							"labelFontColor": "#666666"
						},
						"markLine": {
							"type": "solid",
							"dashLength": 4,
							"data": []
						}
					}
				},
				"flowUser":{
					"type": "line",
					"canvasId": "",
					"canvas2d": false,
					"background": "none",
					"animation": true,
					"timing": "easeOut",
					"duration": 1000,
					"color": [
							"#FF9731",
							"#91CB74",
							"#FAC858",
							"#EE6666",
							"#73C0DE",
							"#3CA272",
							"#FC8452",
							"#9A60B4",
							"#ea7ccc"
					],
					"padding": [
							15,
							15,
							0,
							15
					],
					"rotate": false,
					"rotateLock": false,
					"fontSize": 10,
					"fontColor": "#A6A9B3",
					"enableScroll": false,
					"touchMoveLimit": 60,
					"enableMarkLine": false,
					"dataLabel": true,
					"dataPointShape": true,
					"dataPointShapeType": "solid",
					"xAxis": {
						"disabled": false,
						"axisLine": true,
						"axisLineColor": "#CCCCCC",
						"calibration": false,
						"fontColor": "#A6A9B3",
						"fontSize": 10,
						"rotateLabel": false,
						"itemCount": 5,
						"boundaryGap": "center",
						"disableGrid": true,
						"gridColor": "#CCCCCC",
						"gridType": "solid",
						"dashLength": 4,
						"gridEval": 1,
						"scrollShow": false,
						"scrollAlign": "left",
						"scrollColor": "#A6A6A6",
						"scrollBackgroundColor": "#EFEBEF"
					},
					"yAxis": {
						"disabled": false,
						"disableGrid": false,
						"splitNumber": 5,
						"gridType": "dash",
						"dashLength": 2,
						"gridColor": "#CCCCCC",
						"padding": 10,
						"showTitle": false,
						"data": []
					},
					"legend": {
						"show": false,
						"position": "bottom",
						"float": "center",
						"padding": 5,
						"margin": 5,
						"backgroundColor": "rgba(0,0,0,0)",
						"borderColor": "rgba(0,0,0,0)",
						"borderWidth": 0,
						"fontSize": 13,
						"fontColor": "#666666",
						"lineHeight": 11,
						"hiddenColor": "#CECECE",
						"itemGap": 10
					},
					"extra": {
						"line": {
								"type": "curve",
								"width": 3
						},
						"tooltip": {
							"showBox": true,
							"showArrow": true,
							"borderWidth": 0,
							"borderRadius": 0,
							"borderColor": "#000000",
							"borderOpacity": 0.7,
							"bgColor": "#000000",
							"bgOpacity": 0.7,
							"gridType": "solid",
							"dashLength": 4,
							"gridColor": "#CCCCCC",
							"fontColor": "#FFFFFF",
							"splitLine": true,
							"horizentalLine": false,
							"xAxisLabel": false,
							"yAxisLabel": false,
							"labelBgColor": "#FFFFFF",
							"labelBgOpacity": 0.7,
							"labelFontColor": "#666666"
						},
						"markLine": {
							"type": "solid",
							"dashLength": 4,
							"data": []
						}
					}
				},
				BrowseUserList: [],
				staffList: [],
				page: 0,
				noMore: false,
				loading: false
			};
		},
		onReachBottom() {
			if(!this.noMore){
				this.page++
				this.loading = true
				this.getStaffList()
			}
		},
		onLoad() {
			if(uni.getStorageSync('userInfo')){
				this.init()
				// this.AddFoot('每日报告')
			}else{
				let pages = getCurrentPages();
				let curPage = pages[pages.length - 1];
				uni.setStorageSync('loginUrl',curPage.$page.fullPath)
				uni.reLaunch({
					url: '/pages/login/login'
				})
			}
		},
		methods: {
			init(){
				this.$api.pushData({store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id}).then(res => {
					this.info = res.datas
					let chartList = JSON.parse(JSON.stringify(res.datas.week_list))
					this.moneyChartData.series = [{
						name: '交易金额',
						format: 'seriesDemo1',
						data: []
					}]
					this.flowChartData.series = [{
						name: '访客数据',
						format: 'seriesDemo2',
						data: []
					}]
					chartList.forEach(item => {
						this.moneyChartData.categories.push(item.date)
						this.moneyChartData.series[0].data.push(item.today_price)
						this.flowChartData.categories.push(item.date)
						this.flowChartData.series[0].data.push(item.today_flow)
					})
					let max = Math.max(...this.flowChartData.series[0].data)
					if(max > 5){
						this.flowUser.yAxis.splitNumber = 5
					}else{
						this.flowUser.yAxis.splitNumber = max
					}
				}).then(res => {
					this.getStaffList()
					this.getBrowseUserList()
				})
			},
			getStaffList(){
				let type
				switch (this.current){
					case 0:
						type = ''
						break;
					case 1:
						type = 2
						break;
					case 2:
						type = 3
						break;
					case 3:
						type = 4
						break;
					case 4:
						type = 5
						break;
				}
				this.$api.pushStaffList({type: type,page: this.page,store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id}).then(res => {
					this.loading = false
					if(res.datas.data.length){
						res.datas.data.forEach(item => {
							this.staffList.push(item)
						})
					}else{
						this.noMore = true
					}
				})
			},
			getBrowseUserList(){
				this.$api.StoreFlow({time: 'today', store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id}).then(res => {
					this.BrowseUserList = res.datas.data
				})
			},
			change(e){
				this.current = e
				this.staffList = []
				this.page = 0
				this.noMore = false
				this.getStaffList()
			},
			// 跳转用户动态&&足迹详情
			goInfo(user_id,type){
				uni.navigateTo({
					url: '/pages/index/user-dynamic-info?user_id='+user_id+'&type='+type
				})
			},
			moreFlow(){
				uni.navigateTo({
					url: '/pages/index/user-dynamic'
				})
			},
			makePhone(phone){
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			copyWx(phone){
				uni.setClipboardData({
					data: phone,
					success: () => {
						uni.showToast({
							icon: 'none',
							title: '复制成功，去微信添加好友吧~'
						})
					}
				})
			},
			goGrowing(){
				uni.navigateTo({
					url: '/pages/growing/growing'
				})
				this.AddFoot('每日报告-去装修')
			},
			goStaff(){
				uni.navigateTo({
					url: '/pages/staff/staff'
				})
				this.AddFoot('每日报告-去设置员工')
			},
			AddFoot(where){
				this.$api.AddFoot({
					// #ifdef MP
					type: 1,
					// #endif
					//#ifdef APP-PLUS
					type: 2,
					// #endif
					//#ifdef H5
					type: 3,
					// #endif
					store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id,
					client: 2,
					where: where,
					stay_time: 0,
					goods_id: 0,
					store_goods_id: 0
				})
			},
		}
	}
</script>

<style lang="scss">
	.data-push{
		padding: 30rpx;
		.data-push-tit{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.data-push-tit-left{
				font-size: 32rpx;
				color: #2B313F;
				font-weight: bold;
			}
			.data-push-tit-right{
				font-size: 24rpx;
				color: #868992;
				text{
					color: #2073F5;
				}
			}
		}
		.data-push-1{
			background-color: #2073F5;
			border-radius: 8rpx;
			padding: 30rpx;
			.data-push-1-top{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.store-info{
					display: flex;
					align-items: center;
					image{
						width: 110rpx;
						height: 110rpx;
						border-radius: 50%;
					}
					text.store-name{
						font-size: 32rpx;
						max-width: 8em;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						color: #FFF;
						margin-left: 20rpx;
					}
				}
				.top-info{
					margin-left: 25rpx;
					.top-info-tit{
						color: #A9CBFF;
						font-size: 28rpx;
						margin-bottom: 5rpx;
					}
					.top-info-num{
						font-size: 46rpx;
						color: #FFF;
					}
				}
			}
			.data-push-1-bottom{
				display: flex;
				margin-top: 60rpx;
				.bottom-item{
					flex: 1;
					text-align: center;
					border-right: solid 2rpx #3781f6;
					&:last-child{
						border: none;
					}
					.bottom-item-tit{
						color: #A9CBFF;
						font-size: 24rpx;
						margin-bottom: 10rpx;
					}
					.bottom-item-des{
						color: #FFF;
						font-size: 32rpx;
						text{
							font-size: 24rpx;
						}
					}
				}
			}
		}
		.data-push-2{
			padding: 30rpx;
			background-color: #FFF;
			margin-top: 30rpx;
			border-radius: 8rpx;
			.data-push-2-chart{
				margin: 30rpx -30rpx;
				height: 370rpx;
			}
			.data-push-2-bottom{
				.bottom-top{
					display: flex;
					background-color: #F8F8F8;
					padding: 30rpx;
					border-radius: 4rpx 4rpx 0 0;
					.bottom-top-item{
						color: #2B313F;
						font-size: 20rpx;
						flex: 1;
						text-align: center;
						text{
							font-size: 32rpx;
							font-weight: bold;
						}
					}
				}
				.bottom-bottom{
					background-color: #17264A;
					border-radius: 8rpx;
					display: flex;
					align-items: center;
					padding: 30rpx;
					.text{
						color: #FF9731;
						font-size: 20rpx;
						margin-right: 25rpx;
						flex: 1;
						min-width: 0;
						line-height: 30rpx;
					}
					.btn{
						background-color: #FF9731;
						color: #FFF;
						font-size: 22rpx;
						border-radius: 4rpx;
						width: 100rpx;
						line-height: 48rpx;
						text-align: center;
					}
				}
			}
		}
		.data-push-3{
			background-color: #FFF;
			margin-top: 30rpx;
			padding: 30rpx;
			.data-push-3-chart{
				margin: 30rpx -30rpx 0;
				height: 370rpx;
			}
		}
		.data-push-4{
			background-color: #FFF;
			padding: 30rpx;
			.data-push-4-list{
				/deep/ .nothing-tips{
					position: relative; 
					transform: translate(0,0); 
					top: inherit; 
					left: inherit;
					.nothing-tips-txt{
						margin-bottom: 0;
						padding-top: 30rpx;
					}
				}
				.data-push-4-item{
					padding: 40rpx 0;
					border-bottom: solid 2rpx #EEE;
					&:last-child{
						padding-bottom: 10rpx;
						border-bottom: none;
					}
					.data-push-4-item-top{
						display: flex;
						align-items: center;
						image{
							width: 80rpx;
							height: 80rpx;
							background-color: #EEE;
							border-radius: 50%;
						}
						.data-push-4-item-top-left{
							flex: 1;
							margin: 0 20rpx;
							view.top{
								font-size: 30rpx;
								display: flex;
								align-items: center;
								justify-content: space-between;
								text{
									font-size: 22rpx;
									color: #999;
									flex: 1;
									margin-left: 10rpx;
									text-align: right;
									margin-top: 0;
								}
							}
							view.bottom{
								margin-top: 10rpx;
								display: flex;
								justify-content: space-between;
								font-size: 22rpx;
								color: #999;
								text{
									font-size: 24rpx;
									color: #666;
								}
							}
						}
						.data-push-4-item-top-right{
							text-align: right;
							view{
								font-size: 24rpx;
								color: #666;
							}
							text{
								color: #999;
								font-size: 22rpx;
							}
						}
					}
					.data-push-4-item-bottom{
						margin-top: 20rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						button{
							height: 48rpx;
							line-height: 44rpx;
							border-color: #2073F5;
							color: #2073F5;
							border-radius: 30rpx;
						}
						text{
							font-size: 26rpx;
							color: #666;
							flex: 1;
							min-width: 0;
							margin-right: 30rpx;
						}
						view{
							font-size: 32rpx;
							display: inline-block;
							image{
								width: 24rpx;
								height: 30rpx;
								vertical-align: middle;
								margin: 0 10rpx 0 0;
							}
							&.call{
								height: 50rpx;
								line-height: 50rpx;
								color: rgba(32,115,245,1);
								padding: 0 50rpx;
								border: 2rpx solid rgba(32,115,245,1);
								border-radius: 25rpx;
								font-size: 28rpx;
							}
						}
					}
				}
			}
		}
		.data-push-5{
			background-color: #FFF;
			border-radius: 8rpx;
			padding: 30rpx;
			margin-top: 30rpx;
			.data-push-5-top{
				display: flex;
				align-items: center;
				padding: 50rpx 0 30rpx;
				.top-item{
					flex: 1;
					text-align: center;
					border-right: solid 2rpx #EFF2F8;
					&:last-child{
						border-right: none;
					}
					.top-item-tit{
						color: #868992;
						font-size: 24rpx;
					}
					.top-item-des{
						font-size: 32rpx;
						color: #2B313F;
						margin-top: 10rpx;
						text{
							font-size: 24rpx;
						}
					}
				}
			}
			.data-push-5-bottom{
				background-color: #17264A;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				padding: 30rpx;
				.text{
					color: #FF9731;
					font-size: 20rpx;
					margin-right: 25rpx;
					flex: 1;
					min-width: 0;
					line-height: 30rpx;
				}
				.btn{
					background-color: #FF9731;
					color: #FFF;
					font-size: 22rpx;
					border-radius: 4rpx;
					width: 100rpx;
					line-height: 48rpx;
					text-align: center;
				}
			}
		}
		.data-push-6{
			background-color: #FFF;
			padding: 30rpx;
			border-radius: 8rpx;
			margin-top: 30rpx;
			/deep/ .u-tabs{
				margin: 0 -30rpx;
			}
			/deep/ .nothing-tips{
				position: relative; 
				transform: translate(0,0); 
				top: inherit; 
				left: inherit;
				.nothing-tips-txt{
					margin-bottom: 0;
					padding-top: 30rpx;
				}
			}
			.data-push-6-list{
				.data-push-6-item{
					border: solid 1px #E8EBF0;
					border-radius: 8rpx;
					padding: 20rpx;
					margin-bottom: 30rpx;
					&:last-child{
						margin-bottom: 0;
					}
					.item-top{
						display: flex;
						align-items: center;
						image{
							width: 90rpx;
							height: 90rpx;
							border-radius: 50%;
						}
						.item-top-info{
							flex: 1;
							min-width: 0;
							margin: 0 20rpx;
							.info-name{
								font-size: 28rpx;
								color: #141414;
								font-weight: bold;
							}
							.info-wx{
								font-size: 24rpx;
								color: #868992;
								margin-top: 10rpx;
							}
						}
						.item-top-btn{
							.btn-1{
								width: 123rpx;
								line-height: 52rpx;
								background: #FFFFFF;
								border: 1px solid #E6E6E6;
								border-radius: 4rpx;
								font-size: 24rpx;
								text-align: center;
								margin-bottom: 20rpx;
							}
							.copy{
								width: 124rpx;
								line-height: 52rpx;
								background: #2073F5;
								border-radius: 4rpx;
								font-size: 24rpx;
								text-align: center;
								color: #FFF;
							}
						}
					}
					.item-bottom{
						border-top: dashed 1px #DBDFE6;
						padding-top: 30rpx;
						margin-top: 30rpx;
						.item-bottom-top{
							text{
								width: 50%;
								display: inline-block;
								font-size: 22rpx;
								color: #868992;
							}
						}
						.item-bottom-bottom{
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-top: 30rpx;
							text{
								font-size: 24rpx;
								color: #868992;
							}
							.btn{
								width: 124rpx;
								line-height: 52rpx;
								background: #FFFFFF;
								border: 1px solid #2073F5;
								border-radius: 4rpx;
								font-size: 24rpx;
								color: #2073F5;
								text-align: center;
							}
						}
					}
				}
			}
		}
	}
</style>
